<script setup lang="ts">
  // import RightRoot from "@/components/RightSplit/RightRoot.vue";
  import { ref, computed, provide, onMounted } from 'vue';
  import { ElButton } from 'element-plus';
  import LeftMenu from '/@/views/DigitalTwin/left/leftMenu.vue';
  import LeftContent from '@/views/DigitalTwin/left/leftContent.vue';
  import '@/views/DigitalTwin/css/left.css';
  // 当前选中的顶部标签索引
  const selectedTopLabelIndex = ref(0);
  // 当前选中的子菜单项索引
  const selectedSubItemIndex = ref(0);
  // 创建一个响应式变量来存储API响应的数据
  const apiData = ref(null);
  const loading = ref(false);
  const error = ref(null);

  // 定义所有顶部标签及其对应的子菜单项和组件
  const topLabels = [
    {
      label: '系统资源',
      subItems: [
        { label: '模型', component: 'sysModelContent' },
        { label: '面板', component: 'sysPanelContent' },
        { label: 'DOM', component: 'sysDOMContent' },
      ],
    },
    {
      label: '我的资源',
      subItems: [
        { label: '模型', component: 'myModelContent' },
        { label: '面板', component: 'myPanelContent' },
        { label: '组态', component: 'myConfigurationContent' },
        { label: '图片', component: 'myImageContent' },
      ],
    },
    {
      label: '数据',
      subItems: [
        { label: '数据集', component: 'datasetContent' },
        { label: '数据集', component: 'dataset5f89Content' },
      ],
    },
    {
      label: '结构',
      subItems: [
        { label: '场景', component: 'sceneContent' },
        { label: '节点', component: 'nodeContent' },
        { label: '分组', component: 'groupContent' },
        { label: 'DOM', component: 'structureDOMContent' },
      ],
    },
  ];
  // 提供共享状态
  /*
provide('topLabels', topLabels);
provide('selectedTopLabelIndex', selectedTopLabelIndex);
*/

  // 根据选中顶部标签计算要显示的子菜单项
  const currentSubItems = computed(() => {
    return topLabels[selectedTopLabelIndex.value]?.subItems || [];
  });

  // 根据选中子菜单项计算要显示的组件
  const currentComponent = computed(() => {
    if (currentSubItems.value && currentSubItems.value.length > selectedSubItemIndex.value) {
      return currentSubItems.value[selectedSubItemIndex.value].component;
    }
    return 'No Content Available';
  });

  // 定义一个异步函数来调用API
  const fetchApiData = async (label: string) => {
    /*try {
    loading.value = true;
    error.value = null;

    // 构建 API URL，这里假设有一个固定的基地址和路径参数
    const apiUrl = `http://localhost:8088/api/tenant/assetInfos?pageSize=10&page=0&textSearch=${encodeURIComponent(label)}&sortProperty=createdTime&sortOrder=DESC`;

    // 获取令牌（假设你已经有一个方法来获取或存储令牌）
    const token =
    //const token = "eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJsaXRoaXVtQHRlc3QuY29tIiwidXNlcklkIjoiOWUyMjMyMDAtY2NkYi0xMWVmLWI4NmQtMzllOTU0ZDczNTVjIiwic2NvcGVzIjpbIlRFTkFOVF9BRE1JTiJdLCJzZXNzaW9uSWQiOiI3YjE5ZDI2Zi0yNGE3LTQ0NzYtYjg5Zi05MDQ0MDI3YTY0Y2UiLCJleHAiOjE3MzYzMjU2OTYsImlzcyI6InRoaW5nc2JvYXJkLmlvIiwiaWF0IjoxNzM2MzE2Njk2LCJmaXJzdE5hbWUiOiLog6EiLCJlbmFibGVkIjp0cnVlLCJpc1B1YmxpYyI6ZmFsc2UsInRlbmFudElkIjoiODk2N2E1NzAtY2NkYi0xMWVmLWI4NmQtMzllOTU0ZDczNTVjIiwiY3VzdG9tZXJJZCI6IjEzODE0MDAwLTFkZDItMTFiMi04MDgwLTgwODA4MDgwODA4MCJ9.8eJ7lQdqc1nk6n71nER0JRN_8Fcl0pNXNvwnlCuPeJ45uN2bFBigU5a4dhy84a5ZWL6VZMoWrIy2FgoTqPw_NA" // 你需要实现这个函数来获取令牌

    // 发起 API 请求，并添加 Authorization 头
    const response = await axios.get(apiUrl, {
      headers: {
        'Authorization': `Bearer ${token}`
      }
    });

    apiData.value = response.data; // 假设API响应中的数据在data字段中

  } catch (err) {
    if (err.response && err.response.status === 401) {
      error.value = 'Unauthorized: Please log in again.';
      // 你可以在这里处理未授权的情况，例如重定向到登录页面
    } else {
      error.value = 'Failed to fetch data: ' + err.message;
    }
  } finally {
    loading.value = false;
  }*/
  };
  // 选择顶部标签的方法
  const selectTopLabel = async (index: number) => {
    selectedTopLabelIndex.value = index;
    selectedSubItemIndex.value = 0; // 每次切换顶部标签时重置子菜单项索引
    const label = topLabels[index].label;
    await fetchApiData(label); // 在选择顶部标签时调用 API
  };

  // 选择子菜单项的方法
  const selectSubItem = (index: number) => {
    selectedSubItemIndex.value = index;
  };

  // 页面加载时默认选中“系统资源”
  onMounted(() => {
    selectTopLabel(0); // 确保页面加载时默认选中“系统资源”
  });
</script>

<template>
  <div class="left-layout">
    <!-- Top buttons -->
    <header class="header">
      <el-button
        v-for="(label, index) in topLabels"
        :key="index"
        @click="selectTopLabel(index)"
        :class="{ 'is-active': selectedTopLabelIndex === index }"
        class="nav-button"
      >
        <span class="span">{{ label.label }}</span>
      </el-button>
    </header>

    <!-- Left menu and content -->
    <div class="content-container">
      <left-menu
        :sub-items="currentSubItems"
        :selected-sub-item-index="selectedSubItemIndex"
        @update:selected-sub-item-index="selectSubItem"
      />
      <left-content :current-component="currentComponent" />
    </div>
  </div>
</template>

<style scoped>
  .content-container {
    display: flex;
  }

  .header {
    flex-shrink: 0;
    width: 18vw;
    height: 5vh;
    background-color: #1e2430;
    position: fixed;
    z-index: 100;
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: flex-start; /* 水平从左到右排列 */
    overflow-x: auto;
  }
  /* 调整滚动条高度 */
  .header::-webkit-scrollbar {
    height: 0.5vw;
  }

  :deep(.content) {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5vh;
  }

  .box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: white; /* 确保文字颜色与背景对比明显 */
  }

  .box img {
    max-width: 100%;
    height: auto;
    border: 1px solid #ccc;
    margin-bottom: 1vh;
  }

  .header .span {
    font-size: 0.8vw;
  }

  .header :deep(.el-button) {
    margin-left: 0.4vw !important;
    width: 4vw !important;
    height: 3.4vh;
    margin-top: 0.75vh;
    background: #37434e;
    border: none;
    color: #617b91;
  }
  :deep(.el-button):hover {
    color: #ffffff;
  }
  :deep(.el-button.is-active) {
    color: #ffffff !important;
    background: #4583ff;
  }
</style>
